<form method="post" enctype="multipart/form-data">
    <div id="div_id_clearable_file" class="form-group"> <label for="id_clearable_file" class=""> Clearable file </label>
        <div class=" mb-2">
            <div class="input-group mb-2">
                <div class="input-group-prepend"> 
                    <span class="input-group-text">Currently</span> 
                </div>
                <div class="form-control d-flex h-auto"> 
                    <span class="text-break" style="flex-grow:1;min-width:0"> 
                        <a href="something">something</a> 
                    </span> 
                    <span class="align-self-center ml-2"> 
                        <span class="custom-control custom-checkbox"> 
                            <input type="checkbox" name="clearable_file-clear" id="clearable_file-clear_id" class="custom-control-input">
                            <label class="custom-control-label mb-0" for="clearable_file-clear_id">Clear</label>
                        </span>
                    </span>
                </div>
            </div>
            <div class="input-group mb-0">
                <div class="input-group-prepend"> 
                    <span class="input-group-text">Change</span> 
                </div>
                <div class="form-control custom-file" style="border:0">
                    <input type="file" name="clearable_file" class="custom-file-input my-custom-class" id="id_clearable_file">
                    <label class="custom-file-label text-truncate" for="id_clearable_file">---</label>
                    <script type="text/javascript" id="script-id_clearable_file">
                        document.getElementById("script-id_clearable_file").parentNode.querySelector('.custom-file-input').onchange =  function (e){                var filenames = "";                for (let i=0;i<e.target.files.length;i++){                    filenames+=(i>0?", ":"")+e.target.files[i].name;                }                e.target.parentNode.querySelector('.custom-file-label').textContent=filenames;                }
                    </script>
                </div>
            </div>
            <div class="input-group mb-0"> </div>
        </div>
    </div>
</form>
